<template>
  <div class="scss-demo">
    <div class="demo-header">
      <h2 class="demo-title">SCSS 样式演示</h2>
      <p class="demo-description">展示项目中 SCSS 变量、混入和工具类的使用</p>
    </div>

    <div class="demo-grid">
      <!-- 颜色演示 -->
      <div class="demo-section">
        <h3 class="section-title">颜色系统</h3>
        <div class="color-grid">
          <div class="color-item primary">
            <div class="color-block"></div>
            <span class="color-name">Primary</span>
          </div>
          <div class="color-item success">
            <div class="color-block"></div>
            <span class="color-name">Success</span>
          </div>
          <div class="color-item warning">
            <div class="color-block"></div>
            <span class="color-name">Warning</span>
          </div>
          <div class="color-item danger">
            <div class="color-block"></div>
            <span class="color-name">Danger</span>
          </div>
        </div>
      </div>

      <!-- 按钮演示 -->
      <div class="demo-section">
        <h3 class="section-title">自定义按钮</h3>
        <div class="button-grid">
          <button class="custom-button primary">Primary Button</button>
          <button class="custom-button success">Success Button</button>
          <button class="custom-button warning">Warning Button</button>
          <button class="custom-button danger">Danger Button</button>
          <button class="custom-button ghost">Ghost Button</button>
        </div>
      </div>

      <!-- 卡片演示 -->
      <div class="demo-section">
        <h3 class="section-title">卡片样式</h3>
        <div class="card-grid">
          <div class="custom-card">
            <div class="card-header">
              <div class="card-title">普通卡片</div>
            </div>
            <div class="card-content">
              这是一个使用 SCSS 混入创建的卡片组件。
            </div>
          </div>
          
          <div class="custom-card hover-effect">
            <div class="card-header">
              <div class="card-title">悬停效果卡片</div>
            </div>
            <div class="card-content">
              鼠标悬停时会有动画效果。
            </div>
          </div>
          
          <div class="custom-card glass">
            <div class="card-header">
              <div class="card-title">毛玻璃效果</div>
            </div>
            <div class="card-content">
              使用毛玻璃效果的卡片样式。
            </div>
          </div>
        </div>
      </div>

      <!-- 标签演示 -->
      <div class="demo-section">
        <h3 class="section-title">标签组件</h3>
        <div class="tag-grid">
          <span class="custom-tag primary">Primary Tag</span>
          <span class="custom-tag success">Success Tag</span>
          <span class="custom-tag warning">Warning Tag</span>
          <span class="custom-tag danger">Danger Tag</span>
          <span class="custom-tag info">Info Tag</span>
        </div>
      </div>

      <!-- 工具类演示 -->
      <div class="demo-section">
        <h3 class="section-title">工具类</h3>
        <div class="utility-demo">
          <div class="text-center p-md shadow-light rounded-md">
            <p class="text-lg font-semibold text-primary mb-sm">居中文本</p>
            <p class="text-sm text-secondary">使用工具类快速设置样式</p>
          </div>
          
          <div class="flex-between p-md shadow-medium rounded-lg mt-md">
            <span class="font-medium">Flex Between</span>
            <span class="text-success">✓ 成功</span>
          </div>
          
          <div class="gradient-primary p-lg rounded-xl mt-md text-center">
            <p class="text-white font-bold">渐变背景</p>
          </div>
        </div>
      </div>

      <!-- 动画演示 -->
      <div class="demo-section">
        <h3 class="section-title">动画效果</h3>
        <div class="animation-demo">
          <div class="animation-item fade-in">
            <div class="animation-box">淡入动画</div>
          </div>
          <div class="animation-item slide-in-left">
            <div class="animation-box">左滑入</div>
          </div>
          <div class="animation-item slide-in-right">
            <div class="animation-box">右滑入</div>
          </div>
          <div class="animation-item pulse">
            <div class="animation-box">脉冲动画</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这个组件主要用于展示 SCSS 样式，不需要复杂的逻辑
</script>

<style lang="scss" scoped>
.scss-demo {
  padding: $spacing-xl;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.demo-header {
  text-align: center;
  margin-bottom: $spacing-xl;
  
  .demo-title {
    font-size: $font-size-xxl * 1.5;
    font-weight: $font-weight-bold;
    color: $light-text;
    margin-bottom: $spacing-sm;
  }
  
  .demo-description {
    font-size: $font-size-lg;
    color: $light-text-secondary;
  }
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: $spacing-xl;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  background: white;
  border-radius: $border-radius-lg;
  padding: $spacing-xl;
  box-shadow: $box-shadow-medium;
  
  .section-title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: $light-text;
    margin-bottom: $spacing-lg;
    padding-bottom: $spacing-sm;
    border-bottom: 2px solid $primary-color;
  }
}

// 颜色演示样式
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: $spacing-md;
}

.color-item {
  text-align: center;
  
  .color-block {
    width: 60px;
    height: 60px;
    border-radius: $border-radius-md;
    margin: 0 auto $spacing-sm;
    box-shadow: $box-shadow-light;
  }
  
  .color-name {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
  }
  
  &.primary .color-block { background: $primary-color; }
  &.success .color-block { background: $success-color; }
  &.warning .color-block { background: $warning-color; }
  &.danger .color-block { background: $danger-color; }
}

// 按钮演示样式
.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-md;
}

// 卡片演示样式
.card-grid {
  display: grid;
  gap: $spacing-lg;
}

// 标签演示样式
.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-sm;
}

// 工具类演示样式
.utility-demo {
  .text-secondary {
    color: $light-text-secondary;
  }
}

// 动画演示样式
.animation-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: $spacing-md;
}

.animation-item {
  text-align: center;
  
  .animation-box {
    background: $primary-color;
    color: white;
    padding: $spacing-md;
    border-radius: $border-radius-md;
    font-weight: $font-weight-medium;
    transition: all $transition-base;
    
    &:hover {
      transform: scale(1.05);
      box-shadow: $box-shadow-medium;
    }
  }
}

// 响应式设计
@include respond-to(md) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  
  .scss-demo {
    padding: $spacing-lg;
  }
  
  .demo-header .demo-title {
    font-size: $font-size-xxl;
  }
}

@include respond-to(sm) {
  .button-grid {
    flex-direction: column;
  }
  
  .color-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .animation-demo {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
